<template>
  <div class="demo">
    <div class="demo-title">无边框</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker v-model:value="value1" :bordered="false" />
        <DatePicker v-model:value="value2" picker="week" :bordered="false" />
        <DatePicker v-model:value="value3" picker="month" :bordered="false" />
        <DatePicker v-model:value="value4" picker="quarter" :bordered="false" />
        <DatePicker v-model:value="value5" picker="year" :bordered="false" />
        <DatePicker.RangePicker v-model:value="value6" :bordered="false" />
        <DatePicker.RangePicker v-model:value="value7" picker="week" :bordered="false" />
        <DatePicker.RangePicker v-model:value="value8" picker="month" :bordered="false" />
        <DatePicker.RangePicker v-model:value="value9" picker="year" :bordered="false" />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const value1 = ref<Dayjs>();
  const value2 = ref<Dayjs>();
  const value3 = ref<Dayjs>();
  const value4 = ref<Dayjs>();
  const value5 = ref<Dayjs>();
  const value6 = ref<[Dayjs, Dayjs]>();
  const value7 = ref<[Dayjs, Dayjs]>();
  const value8 = ref<[Dayjs, Dayjs]>();
  const value9 = ref<[Dayjs, Dayjs]>();
</script>
